div#nav-offcanvas(uk-offcanvas="overlay: true")
  aside.uk-offcanvas-bar.uk-padding-remove
    div.uk-card.uk-card-default.uk-card-small.tm-shadow-remove

      header.uk-card-header.uk-flex.uk-flex-middle
        div
          a.uk-link-muted.uk-text-bold(href="#")= shopInfo.phone
          div.uk-text-xsmall.uk-text-muted(style="margin-top: -2px;")
            div!= shopInfo.address
            div= shopInfo.openingHours

      nav.uk-card-small.uk-card-body
        ul.uk-nav-default.uk-nav-parent-icon.uk-list-divider(uk-nav)
          each item in navbarMenu
            li(class= { "uk-parent": item.items })
              a(href= item.href)= item.name
              if item.items
                ul.uk-nav-sub.uk-list-divider
                  each category in item.items
                    li: a(href="subcategory.html")= category.name
                  if item.name === "Catalog"
                    li.uk-text-center
                      +link-to-all('see all categories', item.href)
                  if item.name === "Brands"
                    li.uk-text-center
                      +link-to-all('see all brands', item.href)
          li
            a(href="compare.html") Compare
              span.uk-badge.uk-margin-xsmall-left 3

      nav.uk-card-small.uk-card-body
        ul.uk-nav.uk-nav-default
          each item in toolbarMenu
            li: a(href= item.href)= item.name

      nav.uk-card-body
        ul.uk-iconnav.uk-flex-center
          each social in socials
            li: a(href="#" title= social.name uk-icon= social.icon)



